<template>
    <div class="classroom-usage-statistics">
        <div class="edu-page-title">
            <span v-for="(item, index) in topNavItems" :class="{active: item.active}" :key="index" 
             class="border-right"  @click="clickItem(item)" >{{ item.label }}</span>
        </div>
        <template v-if="focusIndex === 0">
            <week-times></week-times>
        </template>
        <template v-if="focusIndex === 1">
            <sections></sections>
        </template>
    </div>
</template>

<script>
import weekTimes from "./components/weekTimes"
import sections from "./components/section"
export default {
    name: "classroomUsageStatistics",
    components: {
        weekTimes,
        sections
    },
    data() {
        return {
            topNavItems: [
                {
                    label: "按周次",
                    index: 0,
                    active: true
                },
                {
                    label: "按节次",
                    index: 1,
                    active: false
                }
            ],
            focusIndex: 0
        };
    },
    methods: {
        // 切换教室基本信息和教学楼方法
        clickItem(item) {
            this.topNavItems.forEach(nav => {
                nav.active = false;
            });
            item.active = true;
            this.focusIndex = item.index;
        }
    },
    created() {}
};
</script>

<style lang="scss" scoped>
.classroom-usage-statistics {
    .edu-page-title {
        overflow: hidden;
        height: auto;
        font-size: 18px;
        color: #2b3b4e;
        font-weight: bold;
        margin-bottom: 6px;
        span {
            cursor: pointer;
            display: inline-block;
            padding-right: 10px;
        }
        span.active {
            color: #2876c2;
        }
        span.border-right {
            margin-right: 10px;
        }
    }
}
</style>
